<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭"
  >
    <a-form :form="form">
      <a-row>
        <a-form-item label="维度名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row :gutter="8">
            <a-input
              v-decorator="['dimensionName', validatorRules.dimensionName]"
              placeholder="请输入维度名称"
            ></a-input>
          </a-row>
        </a-form-item>
        <a-form-item label="字典配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row :gutter="8">
            <a-radio-group
              name="typeGroup"
              @change="handleTypeChangeRadio"
              v-decorator="['dictType', validatorRules.dictType]"
            >
              <a-radio :value="1">指标字典</a-radio>
              <a-radio :value="3">自定义字典</a-radio>
              <a-radio :value="0">无字典</a-radio>
            </a-radio-group>
          </a-row>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="字典表">
          <a-row :gutter="8">
            <a-col :span="18">
              <a-input
                :disabled="typeFlag === 0"
                v-decorator="[
                  'dictTable',
                  { rules: [{ required: typeFlag === 0 ? false : true, message: '请输入字典表!' }] },
                ]"
                placeholder="请输入字典表"
              ></a-input>
            </a-col>
            <a-col :span="6">
              <a-button :disabled="typeFlag !== 1" type="primary" @click="handleCheckDict">查看字典表</a-button>
            </a-col>
          </a-row>
        </a-form-item>
        <a-col :span="24">
          <a-form-item label="字典编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              :disabled="typeFlag === 0"
              v-decorator="[
                'dictCode',
                { rules: [{ required: typeFlag === 0 ? false : true, message: '请输入字典编码!' }] },
              ]"
              placeholder="请输入字典编号"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="字典值" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              :disabled="typeFlag === 0"
              v-decorator="[
                'dictValue',
                { rules: [{ required: typeFlag === 0 ? false : true, message: '请输入字典值!' }] },
              ]"
              placeholder="请输入字典值"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-show="false">
          <a-form-item label="默认值" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['defaultValue']" placeholder="请输入默认值"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="['remark']" placeholder="请输入备注"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
            <a-radio-group name="radioGroup" v-decorator="['status', validatorRules.status]">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="0">停用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!-- 查看字典表弹窗 -->
    <view-dictionary-table ref="ViewDictionarlist" @reciveData="handleReciveData"></view-dictionary-table>
  </a-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import ViewDictionaryTable from './ViewDictionaryTable'

export default {
  name: 'DimensionInfoModal',
  components: { ViewDictionaryTable },
  data() {
    return {
      title: '',
      visible: false,
      form: this.$form.createForm(this),
      confirmLoading: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      typeFlag: 1,
      validatorRules: {
        dimensionName: {
          rules: [
            { required: true, message: '请输入维度名称!' },
            { validator: this.handleCheckName, trigger: 'blur' }
          ]
        },
        dictType: { rules: [{ required: true, message: '请选择字典配置!' }] },
        status: { rules: [{ required: true, message: '请选择状态!' }] }
      },
      url: {
        add: '/dimension/scSituationDimensionType/add',
        edit: '/dimension/scSituationDimensionType/edit',
        checkName: '/dimension/scSituationDimensionType/dimNameDuplicateCheck'
      }
    }
  },

  methods: {
    /**
     * @description 添加操作
     * @returns void
     */
    add() {
      this.edit({
        dictType: 1,
        status: 1
      })
    },

    /**
     * @description 编辑操作
     * @returns void
     */
    edit(record) {
      record.dictType = parseInt(record.dictType)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.handleTypeChange(this.model.dictType)
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'dimensionName',
            'dictType',
            'dictTable',
            'dictCode',
            'dictValue',
            'defaultValue',
            'remark',
            'status'
          )
        )
      })
    },

    handleTypeChangeRadio(e) {
      this.handleTypeChange(e.target.value)
    },

    /**
     * @description 字典类型
     * @returns void
     */
    handleTypeChange(value) {
      if (this.typeFlag === value) return
      this.typeFlag = value
      this.$nextTick(() => {
        this.form.validateFields(['dictTable', 'dictCode', 'dictValue'], { force: true })
        // 清空字典表、字典编码、字典值
        this.form.setFieldsValue({ dictTable: '', dictCode: '', dictValue: '' })
      })
    },

    /**
     * @description 校验名称唯一性
     * @returns void
     */
    handleCheckName(rule, value, callback) {
      if (this.model.id) {
        // 编辑操作
        if (this.model.dimensionName === value) return callback()
      }
      getAction(this.url.checkName, { dimensionName: value }).then(response => {
        if (response.code == 200 && response.result.has === 1) {
          callback('维度名称重复，请修改！')
        }
        callback()
      }).catch(() => {
        callback()
        this.$message.warning('校验异常')
      })
    },

    /**
     * @description 点击字典表回显
     * @returns void
     */
    handleCheckDict() {
      this.$refs.ViewDictionarlist.showDrawer()
    },

    /**
     * @description 接受数据
     * @returns void
     */
    handleReciveData(value) {
      this.form.setFieldsValue({
        dictTable: 'sc_index_dict',
        dictCode: value.dictCode,
        dictValue: 'item_text'
      })
    },

    /**
    * @description 关闭操作
    * @returns void
    */
    close() {
      this.$emit('close')
      this.visible = false
    },

    /**
     * @description 提交操作
     * @returns void
     */
    handleOk() {
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          const formData = Object.assign(this.model, values)
          httpAction(httpurl, formData, method)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.close()
                this.$emit('ok')
              } else {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.confirmLoading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
